<template>
  <div class="app-container">
    <avue-crud
      :data="userDeviceList"
      :option="option"
      :table-loading="loading"
      @refresh-change="handleQuery"
    >
      <template #menu-left>
        <el-button type="primary" size="small" @click="onAddDeviceClick">添加设备</el-button>
      </template>

      <template #device_sn="{ row }">
        <el-link :href="`/?#/device/situation/detail?sn=${row.device_sn}`" type="primary">
          {{ row.device_sn }}
        </el-link>
      </template>

      <template #device_name="{ row }">
        <el-link :href="`/?#/device/situation/detail?sn=${row.device_sn}`" type="primary">
          {{ row.device_name }}
        </el-link>
      </template>

      <template #online_status="{ row }">
        <el-tag v-if="row.online_status === 1" type="success">在线</el-tag>
        <el-tag v-if="row.online_status === 0" type="info">离线</el-tag>
      </template>

      <template #in_house="{ row, index }">
        <el-switch
          :model-value="row.in_house"
          :active-value="1"
          :inactive-value="0"
          @change="(val) => onInHouseChange(row, val, index)"
        />
      </template>
    </avue-crud>

    <UserWithDeviceSearchDialog ref="userWithDeviceSearchDialogRef" @choosed="onChoosedDevices" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "UserDetailDevices",
});

import { UserDeviceModel } from "@/model/user-device-model";
import { userDetailDevicesOption } from "./avue-option";
import UserAPI from "@/api/user";
import DeviceAPI from "@/api/device";
import UserWithDeviceSearchDialog, {
  UserWithDeviceSearchDialogInstance,
} from "@/components/UserWithDeviceSearchDialog/UserWithDeviceSearchDialog.vue";

const option = ref(userDetailDevicesOption);
const userDeviceList = ref<UserDeviceModel[]>([]);
const loading = ref(false);

const userWithDeviceSearchDialogRef = ref<UserWithDeviceSearchDialogInstance>();

/**
 * @description 组件属性
 */
const props = defineProps({
  userId: { type: [Number, String], default: 0 },
});

/**
 * @description 查询数据
 */
async function handleQuery() {
  loading.value = true;
  UserAPI.detail(props.userId)
    .then((user) => {
      userDeviceList.value = user.user_device || [];
    })
    .finally(() => {
      loading.value = false;
    });
}

// 修改in_house
async function onInHouseChange(device: UserDeviceModel, value: any, index: number) {
  const sn = device.device_sn || "";
  if (!sn) return;
  await DeviceAPI.changeDeviceHouse(sn, value);
  ElMessage.success("修改成功");
  (userDeviceList.value[index] as any).in_house = value;
}

/**
 * @description 新增设备按钮点击事件
 */
function onAddDeviceClick() {
  userWithDeviceSearchDialogRef.value?.open();
}

/**
 * @description 选择绑定设备事件
 */
function onChoosedDevices(value: string[]) {
  DeviceAPI.userbindDevices(props.userId, value).then(() => {
    ElMessage.success("绑定成功");
    handleQuery();
  });
}

onMounted(() => {
  handleQuery();
});
</script>

<style lang="scss" scoped></style>
